<template>
  <div class="meter-modal">
    <el-dialog
      :visible.sync="visible"
      width="30%">

      <div class="flex items-center p-4 rounded-lg cursor-pointer" style="color: #ccc;background-color: #466da9;">
        <div class="flex-1 flex flex-col center text-center">
          <div style="font-size: 30px;">{{shineiwendu}}°C</div>
          <div>室内温度</div>
        </div>
        <div class="flex-1 flex flex-col center text-center">
          <div style="font-size: 30px;">{{sdwendu}}°C</div>
          <div>设定温度</div>
        </div>
        <div class="px-4">
          <i class="iconfont icon-weibiaoti--" style="font-size: 30px;" :style="{'color': openStatus == '1' ? 'green' : '#808080'}"></i>
        </div>
      </div>
      
      <div class="flex mt-5">
        <div v-for="(i, index) in winds" :key="index" class="border rounded cursor-pointer flex-1 flex items-center justify-center p-5" style="font-size: 18px;color: #ccc;" :class="{'ml-2': index !== 0}" :style="{'background': index == wind_index ? '#466da9' : ''}" >
          <i :class="i.icon" class="iconfont"></i>
          <div class="ml-2">{{ i.name }}</div>
        </div>
      </div>

      <div class="flex mt-5">
        <div v-for="(i, index) in modes" :key="index" class="border rounded cursor-pointer flex-1 flex items-center justify-center p-5" style="font-size: 18px;color: #ccc;" :class="{'ml-2': index !== 0}" :style="{'background': index == mode_index ? '#466da9' : ''}">
          <i :class="i.icon" class="iconfont"></i>
          <div class="ml-2">{{ i.name }}</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shineiwendu: 35,
      sdwendu: 25,
      visible: false,
      winds: [
        {
          icon: 'icon-fengsu',
          name: '低档'
        },
        {
          icon: 'icon-feng-erdang',
          name: '中档'
        },
        {
          icon: 'icon-feng-sandang',
          name: '高档'
        },
        {
          icon: 'icon-zidongfeng',
          name: '自动'
        }
      ],
      wind_index: 1,
      modes: [
        {
          icon: 'icon-chushitubiao',
          name: '除湿'
        },
        {
          icon: 'icon-zhire',
          name: '制热'
        },
        {
          icon: 'icon-zhileng',
          name: '制冷'
        },
        {
          icon: 'icon-a-lujing2',
          name: '通风'
        }
      ],
      mode_index: 0,
      openStatus: '0',
      collectTypeValue: {
        '080002': { //开关机状态
          '0': '关机',
          '1': '开机'
        },
        '080004': { //工作模式
          '0': '空',
          '1': '自动',
          '2': '辅助加热',
          '3': '除湿',
          '4': '制热',
          '5': '制冷',
          '6': '通风',
          '7': '单地暖制热',
          '8': '地暖盘管同时'
        },
        '080005': { //风机状态
          '0': '停止',
          '1': '低速',
          '2': '中速',
          '3': '高速',
          '4': '自动',
          '5': '自动低速',
          '6': '自动中速',
          '7': '自动高速'
        },
        '080006': { //阀状态
          '0': '关阀',
          '1': '开阀'
        },
        '080007': { //键盘锁
          '0': '开锁',
          '1': '锁定',
          '2': '高级锁定'
        }
      }
    }
  },
  methods: {
    formatStr(val){
      return String(parseInt(val))
    },
    show(data) {
      console.log(1111111111,data)
      this.visible = true
      for(let i = 0;i<data.length;i++){
         //开关机状态
         if(data[i].collectType == '080002'){
           this.openStatus = this.formatStr(data[i].oval)
         }else  if(data[i].collectType == '080001'){
           //室内温度
           this.shineiwendu = data[i].oval
         }else  if(data[i].collectType == '080003'){
           //设定温度
           this.sdwendu = data[i].oval
         }else  if(data[i].collectType == '080004'){
           //工作模式
           let value = parseInt(data[i].oval)
           this.mode_index = value - 3
         }else  if(data[i].collectType == '080005'){
           //风机状态
           let value = parseInt(data[i].oval)
           this.wind_index = value-1
         }
      }
    }
  },
}
</script>

<style lang="scss">
</style>
